<template>
  <navbar :title="data.info.title" :isBack="true"></navbar>
  <loading v-if="!data.info"></loading>
  <template v-else>
    <template v-if="data.type != 2">
      <view class="content center flex-direction-column">
        <view class="title">{{ data.info.title }}</view>
        <view class="time">{{ data.info.create_time }}</view>
        <u-parse :html="data.info.content"></u-parse>
      </view>
    </template>
    <template v-if="data.type == 2">
      <view class="content center flex-direction-column">
        <view class="title">{{ data.info.title }}</view>
        <view class="desc flex">
          <view class="item flex">
            <image src="/pagesA/static/image/27.png"></image>
            <text>{{ data.info.create_time }}</text>
          </view>
          <view class="item flex">
            <image src="/pagesA/static/image/26.png"></image>
            <text>{{ data.info.views }}</text>
          </view>
        </view>
        <u-parse :html="data.info.content" class="parse"></u-parse>
      </view>
    </template>
  </template>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getNoticeDetail, getNewDetail, getHelpDetail } from '@/service/api/index'
let data = reactive({
  type: 0,
  title: '',
  info: null
})

// 公告详情
const getNoticeDetailApi = async (id) => {
  const { msg } = await getNoticeDetail({ id })
  data.info = msg
}

// 新闻详情
const getNewDetailApi = async (id) => {
  const { msg } = await getNewDetail({ id })
  data.info = msg
}

// 帮助文档详情
const getHelpDetailApi = async (id) => {
  const { msg } = await getHelpDetail({ id })
  data.info = msg
}

onLoad((option) => {
  let obj = JSON.parse(option.params)
  data.type = obj.type
  data.title = obj.title
  // 消息
  if (obj.type == 1) {
    getNoticeDetailApi(obj.id)
  }
  // 新闻
  else if (obj.type == 2) {
    getNewDetailApi(obj.id)
  }
  // 帮助文档
  else if (obj.type == 3) {
    getHelpDetailApi(obj.id)
  }
})
</script>

<style lang="scss" scoped>
.parse {
  font-size: 28rpx;
  color: #333;
}
.center {
  align-items: center;
  justify-content: center;
  .desc {
    margin-top: 26rpx;
    margin-bottom: 42rpx;
    .item {
      &:nth-child(1) {
        &::after {
          width: 2rpx;
          height: 12rpx;
          content: ' ';
          display: block;
          margin: 0 28rpx;
          background-color: #dddddd;
        }
      }
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 6rpx;
      }
      text {
        height: 34rpx;
        color: #777777;
        font-size: 28rpx;
        line-height: 34rpx;
      }
    }
  }
}
.content {
  padding: 20rpx 36rpx;
  .title {
    font-size: 32rpx;
    // font-weight: bold;
    line-height: 44rpx;
  }
  .time {
    height: 34rpx;
    font-size: 26rpx;
    line-height: 34rpx;
    color: #999999;
    margin: 12rpx 0 30rpx 0;
  }
}
</style>
